<template>
	<div class="view">
		<template>
			<Top :title="'编辑账号'"></Top>
		</template>
		<div class="main">
			<div class="main_con">
				<div class="main_title">编辑账号</div>
				<div class="main_view">
					<el-form label-position="top" :model="form" ref="form" :rules="rules">
						<el-form-item label="账号" class="is-required" prop="adminname">
							<el-input placeholder="请输入账号" class="input" v-model="form.adminname"
								:disabled="true"></el-input>
						</el-form-item>
						<el-form-item label="账号有效期" prop="riqiExpire">
							<el-date-picker type="datetime" placeholder="选择日期时间" align="center"
								value-format="yyyy-MM-dd HH:mm:ss" v-model="form.riqiExpire" class="input">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="真实姓名">
							<el-input placeholder="请输入真实姓名" class="input" v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="联系电话">
							<el-input placeholder="请输入联系电话" class="input" v-model="form.tel"></el-input>
						</el-form-item>
						<el-form-item label="个人邮箱">
							<el-input placeholder="请输入个人邮箱" class="input" v-model="form.email"></el-input>
						</el-form-item>
						<el-form-item label="QQ">
							<el-input placeholder="请输入QQ" class="input" v-model="form.qq"></el-input>
						</el-form-item>
						<el-form-item label="微信号">
							<el-input placeholder="请输入微信号" class="input" v-model="form.email"></el-input>
						</el-form-item>
						<!-- <el-form-item label="身份证号">
							<el-input placeholder="请输入身份证号" class="input" v-model="form.sfz"></el-input>
						</el-form-item> -->

						<el-form-item label="绑定IP" prop="ip" :class="{ 'is-required': isIp }">
							<el-checkbox @change="checkChange" v-model="isIp"></el-checkbox>
							<el-input placeholder="请输入绑定IP" class="input" v-model="form.ip" style="margin-left: 10px;">
							</el-input>
						</el-form-item>
						<!-- <el-form-item label="绑定IP" v-else>
							<el-checkbox @change="checkChange" v-model="isIp"></el-checkbox>
							<el-input placeholder="请输入绑定IP" class="input" :disabled="true" v-model="form.ip"
								style="margin-left: 10px;">
							</el-input>
						</el-form-item> -->
					</el-form>

				</div>
				<div class="saveBtn">
					<el-button type="primary" size="medium" @click="command" :disabled="isAdd">保存并发布</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Top from "../../../components/top.vue"
import { mapState } from "vuex"
export default {
	components: {
		Top
	},
	data() {
		var pwdRule = (rule, value, callback) => {
			if (value.length < 6) {
				return callback(new Error('密码不能小于6位数'));
			} else {
				callback();
			}
		}

		var ipRule = (rule, value, callback) => {
			if (this.isIp) {
				if (value == "") {
					return callback(new Error('请输入ip'));
				} else {
					callback();
				}
			} else {
				callback();
			}
		}

		return {
			form: {
				adminname: "", // 账号
				pwd: "", // 密码
				gname: "", //组名
				name: "", //真实姓名
				tel: "", //联系电话
				email: "", // 个人邮箱
				qq: "", // qq号
				wechat: "", // 微信号
				sfz: "", // 身份证号
				riqiExpire: "", // 日期有效期
				ip: "", //绑定ip地址
				gid: "",
			},
			isIp: false,
			rules: {
				adminname: [{
					required: true,
					message: '请输入账号',
					trigger: 'change'
				}],
				pwd: [{
					required: true,
					message: '请输入密码',
					trigger: 'change'
				},
				{
					validator: pwdRule,
					trigger: 'change'
				}
				],

				name: [{
					required: true,
					message: '请输入姓名',
					trigger: 'change'
				}],
				riqiExpire: [{
					required: true,
					message: '请选择过期时间',
					trigger: 'change'
				}],
				ip: [{
					validator: ipRule,
					trigger: 'blur'
				}],
			},
			isAdd: false,

			item: {},
		}
	},
	computed: {
		rank() {
			var lvel = 0;
			if (/[0-9]/.test(this.form.pwd) && this.form.pwd.length > 6) {
				lvel++;
			}
			if (/[a-zA-Z_]/.test(this.form.pwd) && this.form.pwd.length > 6) {
				lvel++;
			}
			if (/[^0-9a-zA-Z_]/.test(this.form.pwd) && this.form.pwd.length > 6) {
				lvel++;
			}

			return lvel
		},
		...mapState(['urlParma'])
	},
	methods: {
		// 保存表单验证
		command() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.isAdd = true
					this.save()
				}
			});
		},

		// 保存
		save() {
			let list = this.form
			if (this.isIp) {
				list.isIp = 1
			}else{
				list.isIp = 0
			}
			this.$http({
				'method': 'post',
				'url': this.$api.adminUpdate,
				data: list
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
					this.$refs.form.resetFields()
					this.$store.commit("clearParma")
					this.$router.push('/user')
				} else {
					this.$message.error(res.data.message)
				}
				this.isAdd = false
			})
		},

		

		// 是否绑定ip
		checkChange(e) {
			if (e) {

			} else {
				this.form.ip = ""
				this.$refs.form.clearValidate('ip')
			}
		},

		

		getDetail(item) {
			this.form.adminname = item.adminname;
			this.form.name = item.name;
			this.form.tel = item.tel;
			this.form.email = item.email;
			this.form.qq = item.qq;
			this.form.riqiExpire = item.riqiExpire;
			this.form.ip = item.ip;
			this.form.id = item.id;
			if(item.isIp==1){
				this.isIp = true
			}else{
				this.isIp = false
			}
		},

	},
	created() {
		let item = this.urlParma;
		this.getDetail(item);
	}
}
</script>

<style src="@/assets/css/userAdd.css" scoped>
/* @import url(); */
</style>
